<template>
	<div class="main">
		<ul>
			<li v-for="(item,index) in lawyerList" :key="item.id">
				<div class="main_content">
					<div class="main_content_admin">
						<div class="main_content_admin_img">
							<img v-bind:src="baseUrl+'/static/upload/lawyer/'+item.avatar">
						</div>
						<div class="main_content_admin_message">
							<div class="main_content_admin_message_header">
								<div>{{item.name}}</div>
								<p class="main_content_admin_message_green" v-if="item.status==1">在线</p>
								<p class="main_content_admin_message_red" v-else-if="item.status==2">忙碌</p>
								<p class="main_content_admin_message_blue" v-else-if="item.status==3">值班</p>
								<p v-else>离线</p>
							</div>
							<div class="main_content_admin_message_footer">咨询次数：{{item.consultNumber}}次&nbsp;&nbsp;当前评分：{{item.consultScore}}分</div>
						</div>
					</div>
					<ul class="main_content_tag">
						<li v-for="(item,index) in item.tag" :key="index">{{item}}</li>
					</ul>
				</div>
				<div class="main_btn">
					<a href="javascript:;" :data-index="index" data-action="phone" @click="consultAdd($event)" class="main_btn_phone">电话咨询</a>
					<a href="javascript:;" :data-index="index" data-action="online" @click="consultAdd($event)"   class="main_btn_online">在线咨询</a>
					<a  class="main_btn_reward">打赏律师</a>
				</div>
				<a class="main_link" ><img src="@/assets/images/wechat/index/studentlogin/findpassword_choose.png"></a>
			</li>
			
			
		   
		</ul>
	</div>
</template>

<script>
//引入js	
import router from '@/router/index'
import { studentSelectLawyer } from '@/api/lawyer'
	
export default {
	components: {
	},
    data(){
		return {
			baseUrl:process.env.VUE_APP_BASE_API,
			
			lawyerList:[],
			pageData:{
				nowPage: 1,
				maxPage: 1,
				total: 1,
				limit: 20
			}
		}
    },
    created:async function(){
		var ajaxData={}
		ajaxData.pageNo=this.pageData.nowPage
		ajaxData.pageSize=this.pageData.limit
		
		var resultData = await studentSelectLawyer(ajaxData)
		if(resultData.code==200){
		   this.lawyerList=resultData.data.lawyerFindResVoList;
		   for(var i=0;i<this.lawyerList.length;i++){
			   this.lawyerList[i].tag=JSON.parse(this.lawyerList[i].tag);
		   }
		}
  	},
  	beforeMount: function() {
		
    },
  	mounted: function () {
  		
  	},
  	methods:{
  		consultAdd:function(e){
			var that=this;
			var index=e.target.dataset.index;
			if(that.lawyerList[index].status==0)
			{
				alert("当前律师不在线，请选择其他律师");
				return 0;
			}
			router.push({path:'consultadd',query: {action: e.target.dataset.action,lawyerId: that.lawyerList[index].id}})
		}
  	}
}
</script>

<style lang="scss" scoped>
.main{ width:100%; background:#f6f5f7; overflow:hidden; }
.main>ul{ width:100%;}
.main>ul>li{ width:100%; margin-top:10px; background:#FFF; position:relative}
.main>ul>li:nth-child(1){ margin-top:0}
.main_content{ width:320px;margin:auto; overflow:hidden; border-bottom:1px solid #e0e0e1}
.main_content_admin{ width:100%; margin-top:10px; overflow:hidden}
.main_content_admin_img{ width:60px; height:60px;border-radius:50%; float:left; overflow:hidden}
.main_content_admin_img>img{ width:100%;}
.main_content_admin_message{ width:240px;float:right;}
.main_content_admin_message_header{ width:100%; overflow:hidden;margin-top:5px;}
.main_content_admin_message_header>div{ float:left; line-height:24px; font-size:16px;}
.main_content_admin_message_header>p{ float:right; line-height:24px; color:#a1a1a1}
.main_content_admin_message_green{color:#69b9c7 !important}
.main_content_admin_message_red{color:#cc3333 !important}
.main_content_admin_message_blue{color:#0054bc !important}
.main_content_admin_message_footer{ width:100%; font-size:12px; margin-top:10px;}
.main_content_tag{ width:100%; overflow:hidden;margin-top:10px;margin-bottom:10px;}
.main_content_tag>li{ float:left; margin-left:10px; line-height:24px;font-size:12px; color:#69b9c7}
.main_content_tag>li:nth-child(1){ margin-left:0}
.main_btn{ width:320px; margin:auto; margin-top:10px;   overflow:hidden;}
.main_btn>a{float:left; width:98px; line-height:36px; text-align:center; border:1px solid #0054bc; border-radius:4px;margin-bottom:10px; display: block;}
.main_btn_phone{color:#0054bc;}
.main_btn_online{color:#fff; background:#0054bc; margin-left: 10px;}
.main_btn_reward{color:#0054bc; margin-left: 10px;}
.main_link{ width:30px; height:30px; overflow:hidden; display:block; position:absolute; top:50px; right:10px;}
.main_link>img{ width:100%;}
</style>
